<template>
  <a-layout id="components-layout-demo-fixed-sider">
    <a-layout-sider
      class="beauty-scroll"
      :style="{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
      }"
    >
      <div class="logo" />
      <NavMenu @select-item="onSelectItem" />
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-header :style="{ background: '#fff', padding: 0 }">
        <a-row>
          <a-col :span="20"> </a-col>
          <a-col :span="4">
            <UserDropDownMenu
              @logout="onLogout"
              :username="username"
            />
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
        <TabContent :newPane="newPane" />
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }">
        {{ systemName }} ©2020 昆明理工大学智能感知与计算实验室
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import NavMenu from './NavMenu'
import UserDropDownMenu from './UserDropDownMenu'
import TabContent from './TabContent'

export default {
  name: 'Dashboard',
  props: ['username', 'systemName'],
  emits: ['logout'],
  data() {
    return {
      newPane: {},
      selectedKeys: ['4'],
    }
  },
  components: {
    NavMenu,
    UserDropDownMenu,
    TabContent,
  },
  methods: {
    // 选择菜单项时，切换页面内容
    onSelectItem(e) {
      this.newPane = {
        key: e.key,
        title: e.item.title,
      }
    },
    onLogout() {
      this.$emit('logout')
    },
  },
}
</script>

<style>
#components-layout-demo-fixed-sider .logo {
  /* height: 32px; */
  /* background: rgba(255, 255, 255, 0.2); */
  margin: 16px;
}
</style>